import { ProLayout } from '@ant-design/pro-components';
import { Link, Outlet, useAppData, useLocation } from 'umi';
import Footer from '@/components/Footer'; 
import { Space, Dropdown, Button, Avatar } from 'antd';
import { UserOutlined } from '@ant-design/icons';

// 模拟登录用户信息
const currentUser = {
  name: '张三',
};

// 模拟注销函数
const handleLogout = () => {
  console.log('用户已注销');
};

const menu = {
  items: [
    {
      key: 'logout',
      label: <Button onClick={handleLogout}>注销</Button>,
    },
  ],
};

export default function Layout() {
  const { clientRoutes } = useAppData();
  const location = useLocation();

  return (
    <ProLayout
      route={clientRoutes[0]}
      location={location}
      title="Umi x Ant Design"
      menuItemRender={(menuItemProps, defaultDom) => {
        if (menuItemProps.isUrl || menuItemProps.children) {
          return defaultDom;
        }
        if (menuItemProps.path && location.pathname !== menuItemProps.path) {
          return (
            <Link to={menuItemProps.path} target={menuItemProps.target}>
              {defaultDom}
            </Link>
          );
        }
        return defaultDom;
      }}
      // 确保 actionsRender 正确配置
      actionsRender={() => [
        <Dropdown menu={menu}>
          <a onClick={(e) => e.preventDefault()}>
            <Space>
              <Avatar icon={<UserOutlined />} />
              {currentUser.name}
            </Space>
          </a>
        </Dropdown>
      ]}
      // 确保没有其他配置覆盖头部内容
      headerContentRender={undefined} 
      headerRender={undefined} 
    >
      <Outlet />
      <Footer /> 
    </ProLayout>
  );
}